import React from 'react';
import { SearchOutline } from 'antd-mobile-icons';
import { Swiper } from 'antd-mobile';
import './HomeSeahd.scss';
import { useNavigate } from 'react-router-dom';
function HomeSeahd({ pic }) {
   let navigate = useNavigate();
   // console.log('pic------', pic);
   return pic && (
      <div className="serach">
         <div className="hd_container" onClick={()=>{navigate('/Search')}}>
            <Swiper direction='vertical'
               loop
               autoplay
               style={{ '--height': '30px' }}
               indicator={() => null}
            >
               {pic.map((item) => (
                  <Swiper.Item key={item.id} style={{ "--height": "30px", "fontSize": "14px", "color": "#B3B9C5", "lineHeight": "30px" }}>
                     {item.name}
                  </Swiper.Item>
               ))}
            </Swiper>
            <SearchOutline fontSize={24} color="#CCC" />
         </div>
      </div>
   );
}

export default HomeSeahd;